<template>
  <view class="w-full max-w-[750rpx] mx-auto min-h-screen bg-[#f6f8fa] p-[32rpx] box-border">
    <text class="block text-[56rpx] font-extrabold mb-[48rpx] text-center text-blue-600 drop-shadow">健康管理人（健康管家）基本信息</text>
    
    <nut-form ref="formRef" :model="form" :rules="formRules" class="max-w-[700rpx] w-full mx-auto box-border">
      <nut-form-item label="健康管理人姓名" prop="健康管理人姓名" class="mb-[32rpx] text-[32rpx]">
        <nut-input 
          v-model="form.健康管理人姓名" 
          placeholder="请输入姓名"
          class="h-[88rpx] text-[32rpx]"
          @blur="validateField('健康管理人姓名')"
        />
      </nut-form-item>
      
      <nut-form-item label="健康管理人手机号" prop="健康管理人手机号" class="mb-[32rpx] text-[32rpx]">
        <nut-input 
          v-model="form.健康管理人手机号" 
          placeholder="请输入手机号"
          type="tel"
          maxlength="11"
          class="h-[88rpx] text-[32rpx]"
          @input="onPhoneInput"
          @blur="validateField('健康管理人手机号')"
        />
        <view v-if="phoneError" class="text-[28rpx] text-red-500 mt-[12rpx]">
          {{ phoneError }}
        </view>
      </nut-form-item>
      
      <nut-form-item label="健康管理人身份证号码" prop="健康管理人身份证号码" class="mb-[24rpx]">
        <nut-input 
          v-model="form.健康管理人身份证号码" 
          placeholder="请输入身份证号码"
          maxlength="18"
          @input="onIdCardInput"
          @blur="validateField('健康管理人身份证号码')"
        />
        <view v-if="idCardError" class="text-[24rpx] text-red-500 mt-[8rpx]">
          {{ idCardError }}
        </view>
      </nut-form-item>
      
      <nut-form-item label="AnfinID" prop="AnfinID" class="mb-[24rpx]">
        <nut-input 
          v-model="form.AnfinID" 
          placeholder="请输入AnfinID"
          @blur="validateField('AnfinID')"
        />
      </nut-form-item>
      
      <nut-form-item label="健康管理人所在医疗机构名称" prop="健康管理人所在医疗机构名称" class="mb-[24rpx]">
        <nut-input 
          v-model="form.健康管理人所在医疗机构名称" 
          placeholder="请输入机构名称"
          @blur="validateField('健康管理人所在医疗机构名称')"
        />
      </nut-form-item>
      
      <nut-form-item label="健康管理人所在科室" prop="健康管理人所在科室" class="mb-[24rpx]">
        <nut-input 
          v-model="form.健康管理人所在科室" 
          placeholder="请输入科室"
          @blur="validateField('健康管理人所在科室')"
        />
      </nut-form-item>
      
      <nut-form-item label="健康管理人签名凭证" prop="健康管理人签名凭证" class="mb-[24rpx]">
        <nut-input 
          v-model="form.健康管理人签名凭证" 
          placeholder="请输入签名凭证"
          @blur="validateField('健康管理人签名凭证')"
        />
      </nut-form-item>
      
      <nut-form-item label="从业人员岗前培训报名表其它信息" class="mb-[24rpx]">
        <nut-textarea 
          v-model="form.从业人员岗前培训报名表其它信息" 
          placeholder="请输入其它信息（选填）"
          rows="3"
          maxlength="200"
          show-word-limit
        />
      </nut-form-item>
      
      <view class="mt-[48rpx] flex gap-[24rpx]">
        <nut-button 
          block 
          type="default" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1"
          @click="resetForm"
        >
          重置表单
        </nut-button>
        <nut-button 
          block 
          type="primary" 
          class="h-[96rpx] rounded-[16rpx] text-[32rpx] font-bold shadow flex-1 bg-green-500 hover:bg-green-600 active:bg-green-700"
          :loading="submitting"
          @click="submitForm"
        >
          {{ submitting ? '保存中...' : '保存信息' }}
        </nut-button>
      </view>
    </nut-form>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref, reactive } from 'vue'
// import { 
//   Form as NutForm, 
//   FormItem as NutFormItem, 
//   Input as NutInput,
//   Button as NutButton,
//   Textarea as NutTextarea
// } from '@nutui/nutui-taro'

/**
 * 健康管理人基本信息表单数据
 * @typedef {Object} ManagerInfo
 * @property {string} 健康管理人姓名
 * @property {string} 健康管理人手机号
 * @property {string} 健康管理人身份证号码
 * @property {string} AnfinID
 * @property {string} 健康管理人所在医疗机构名称
 * @property {string} 健康管理人所在科室
 * @property {string} 健康管理人签名凭证
 * @property {string} 从业人员岗前培训报名表其它信息
 */
const form = ref({
  健康管理人姓名: '',
  健康管理人手机号: '',
  健康管理人身份证号码: '',
  AnfinID: '',
  健康管理人所在医疗机构名称: '',
  健康管理人所在科室: '',
  健康管理人签名凭证: '',
  从业人员岗前培训报名表其它信息: ''
})

const formRef = ref()
const submitting = ref(false)
const phoneError = ref('')
const idCardError = ref('')

// 表单验证规则
const formRules = reactive({
  健康管理人姓名: [
    { required: true, message: '请输入健康管理人姓名' },
    { min: 2, max: 20, message: '姓名长度应在2-20个字符之间' }
  ],
  健康管理人手机号: [
    { required: true, message: '请输入手机号' },
    { 
      validator: (value: string) => /^1[3-9]\d{9}$/.test(value), 
      message: '请输入正确的手机号格式' 
    }
  ],
  健康管理人身份证号码: [
    { required: true, message: '请输入身份证号码' },
    { 
      validator: (value: string) => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value), 
      message: '请输入正确的身份证号码格式' 
    }
  ],
  AnfinID: [
    { required: true, message: '请输入AnfinID' }
  ],
  健康管理人所在医疗机构名称: [
    { required: true, message: '请输入医疗机构名称' }
  ],
  健康管理人所在科室: [
    { required: true, message: '请输入所在科室' }
  ],
  健康管理人签名凭证: [
    { required: true, message: '请输入签名凭证' }
  ]
})

// 手机号输入验证
const onPhoneInput = (value: string) => {
  phoneError.value = ''
  
  // 只允许数字
  const numericValue = value.replace(/\D/g, '')
  if (numericValue !== value) {
    form.value.健康管理人手机号 = numericValue
  }
  
  // 验证格式
  if (numericValue && !/^1[3-9]\d{9}$/.test(numericValue) && numericValue.length === 11) {
    phoneError.value = '请输入正确的手机号格式'
  }
}

// 身份证号输入验证
const onIdCardInput = (value: string) => {
  idCardError.value = ''
  
  // 只允许数字和X
  const validValue = value.replace(/[^\dXx]/g, '').toUpperCase()
  if (validValue !== value) {
    form.value.健康管理人身份证号码 = validValue
  }
  
  // 验证格式
  if (validValue && validValue.length >= 15) {
    if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X)$)/.test(validValue)) {
      idCardError.value = '请输入正确的身份证号码格式'
    }
  }
}

// 字段验证（兼容没有 validateField 的场景）
const validateField = async (fieldName: string) => {
  if (!formRef.value) return true
  const maybeForm: any = formRef.value
  if (typeof maybeForm.validateField === 'function') {
    return maybeForm.validateField(fieldName)
  }
  if (typeof maybeForm.validate === 'function') {
    return maybeForm.validate()
  }
  return true
}

// 重置表单
const resetForm = () => {
  Taro.showModal({
    title: '确认重置',
    content: '确定要重置表单吗？所有已填写的信息将被清空。',
    success: (res) => {
      if (res.confirm) {
        form.value = {
          健康管理人姓名: '',
          健康管理人手机号: '',
          健康管理人身份证号码: '',
          AnfinID: '',
          健康管理人所在医疗机构名称: '',
          健康管理人所在科室: '',
          健康管理人签名凭证: '',
          从业人员岗前培训报名表其它信息: ''
        }
        phoneError.value = ''
        idCardError.value = ''
        
        Taro.showToast({
          title: '表单已重置',
          icon: 'success',
          duration: 1500
        })
      }
    }
  })
}

// 表单提交
const submitForm = async () => {
  try {
    submitting.value = true
    
    await formRef.value.validate()
    
    // 清除错误信息
    phoneError.value = ''
    idCardError.value = ''
    
    // 模拟提交延迟
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 显示成功提示
    Taro.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 2000
    })
    
    // 这里可以添加实际的保存逻辑
    console.log('健康管理人信息:', form.value)
    
  } catch (error) {
    // 显示错误提示
    Taro.showToast({
      title: '请完善必填信息',
      icon: 'error',
      duration: 2000
    })
  } finally {
    submitting.value = false
  }
}
</script>

<!--
性能优化说明：
- 仅渲染表单，页面结构简单，渲染性能高。
--> 